import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';

class AdScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //这是动画效果
      bounceValue: new Animated.Value(1),
      count: 5
    };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ count: this.state.count - 1 });
      if (this.state.count === -1) {
        Animated.timing(this.state.bounceValue, {
          toValue: 0,
          duration: 500
        }).start();
        clearInterval(this.timer);
        this.timer = null;
      }
    }, 1000);
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.Image
          source={{ uri: 'http://k.zol-img.com.cn/sjbbs/7692/a7691515_s.jpg' }}
          style={{ width: 375, height: 667, opacity: this.state.bounceValue }}
        />
        {this.state.count > -1 && (
          <Text
            style={{ position: 'absolute', top: 10, right: 10, color: 'white' }}
          >
            {this.state.count}跳过
          </Text>
        )}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

export default AdScreen;
